<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/common.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>滨海基金 -销售图表</title>
<style type="text/css">
#sel>select {
	width: 200px;
	height: 35px;
	float: left;
}

#sel {
	width: 100%;
	height: 50px;
	padding: 5px;
}
</style>
</head>

<body>
	<div class="ibox-title">
		<h5>
			销售额 <small>统计,图表</small>
		</h5>
		<div class="ibox-tools">
			<!-- <a class="btn  btn-sm btn-bitbucket" onclick="exportXLS()"> <i
				class="fa fa-share-square-o"></i> 导出xls
			</a> -->
			<button type="button" data-toggle="dropdown"
				style="border: none; color: white;"
				class="btn  btn-sm btn-bitbucket">
				导出xls <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" style="left: -90px">
				<li><a onclick="exportXLS('all')" class="fa fa-share-square-o">&nbsp;导出所有员工数据</a></li>
				<li><a onclick="exportXLS('this')" class="fa fa-share-square-o">&nbsp;导出当前页面数据</a></li>
			</ul>
		</div>
	</div>
	<div class="ibox-content">
		<div id="sel">
			<!-- <select  class="form-control" onchange="typeChange()" id="type">
	    		<option selected="selected" value="team">团队</option>
	    		<option value="branch">部门</option>
	    		<option value="dept">分公司</option>
	    </select> -->
			<input type="hidden" id="userBranchId"
				value="${loginUser.branch.branchId }" /> <input type="hidden"
				id="userTeamId" value="${loginUser.team.branchId }" /> <input
				type="hidden" id="userQuarters" value="${loginUser.quarters }" /> <input
				type="hidden" value="${canNotReadAllMessage}"
				name="canNotReadAllMessage" id="canNotReadAllMessage"> <select
				class="form-control" onchange="typeChange()" id="date">
				<option selected="selected" value="">全年</option>
				<option value="thisMonth">本月</option>
				<option value="lastMonth">上月</option>
				<option value="1">第一季度</option>
				<option value="2">第二季度</option>
				<option value="3">第三季度</option>
				<option value="4">第四季度</option>

			</select>
			<%-- <select class="form-control" style="width: 210px;" id="company"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 or loginUser.quarters eq 2 or loginUser.quarters eq 3 }">disabled="disabled"</c:if>
				onchange="cpmpanyChage(this.value,'branch')">
				<c:forEach var="dept" items="${dept }">
					<option value="${dept.deptId }"
						<c:if test="${isCanMod >=1  }">selected="selected" </c:if>>${dept.deptName }(${dept.remake })</option>
				</c:forEach>
			</select> <select class="form-control" style="width: 150px;" id="branch"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 or loginUser.quarters eq 2  }">disabled="disabled"</c:if>
				onchange="branchChage(this.value,'team')">
				<option value="">-请选择部门-</option>
				<c:if test="${isCanMod ==1  }">
					<c:forEach var="branchList" items="${branchList }">
						<option value="${branchList.branchId }">${branchList.branchName }</option>
					</c:forEach>
				</c:if>
				<c:if test="${isCanMod >=2  }">
					<c:forEach var="branchList" items="${branchList }">
						<option value="${branchList.branchId }" selected="selected">${branchList.branchName }</option>
					</c:forEach>
				</c:if>
			</select> <select class="form-control" style="width: 150px;"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 }">disabled="disabled"</c:if>
				onchange="typeChange()" id="team">
				<option value="">-请选择团队-</option>
				<c:if test="${isCanMod ==2  }">
					<c:forEach var="teamList" items="${teamList }">
						<option value="${teamList.branchId }">${teamList.branchName }</option>
					</c:forEach>
				</c:if>
				<c:if test="${isCanMod ==3  }">
					<c:forEach var="teamList" items="${teamList }">
						<option value="${teamList.branchId }" selected="selected">${teamList.branchName }</option>
					</c:forEach>
				</c:if>
			</select> --%>
			<select class="form-control" style="width: 200px" id="company"
				onchange="cpmpanyChage(this.value)">
				<%-- <c:forEach var="dept" items="${dept }">
					<option value="${dept.deptId }">${dept.deptName }（${dept.remake }）</option>
				</c:forEach> --%>
			</select> <select class="form-control" style="width: 150px" id="branch"
				onchange="branchChage(this.value)">
				<option value="">-请选择-</option>
			</select> <select class="form-control" style="width: 150px"
				onchange="typeChange()" id="team" onchange="">
				<option value="">-请选择-</option>
			</select>
		</div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div>
			<div id="main" style="width: 800px; height: 400px; float: left;"></div>
			<div id="ball" style="width: 500px; height: 400px; float: left;"></div>
		</div>
	</div>

	<!-- 隐藏一个div-form，作为导出xls使用 -->
	<div style="display: none">
		<form id="exportForm">
			<input id="export-title" name="title" value="销售额统计"> <input
				id="export-date" name="date"> <input id="export-type"
				name="type"> <input id="export-deptId" name="deptId">
			<input id="export-branchId" name="branchId"> <input
				id="export-teamId" name="teamId"> <input
				id="export-canNotReadAllMessage" name="canNotReadAllMessage">
			<input id="export-status" name="status">
		</form>
	</div>
	<script type="text/javascript">
		$(function() {
			cpmpanyDept();
		});
		// 基于准备好的dom，初始化echarts实例
		var bar = echarts.init(document.getElementById('main'));
		var ballDiv = echarts.init(document.getElementById('ball'));
		// 指定图表的配置项和数据
		var barOption = {
			title : {
				text : '销售业绩'
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				left : 'center',
				data : [ '销售' ]
			},
			xAxis : {
				data : []
			},
			yAxis : {
				left : 100,
				type : 'value'
			},
			series : [ {
				name : '销售额',
				type : 'bar',
				data : [ 35, 20, 16, 10, ],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					},
					normal : {
						color : function(params) {
							var colorList = [ 'rgb(164,205,238)',
									'rgb(42,170,227)', 'rgb(25,46,94)',
									'rgb(195,229,235)' ];
							return colorList[params.dataIndex];
						}
					},
				}
			} ]
		};
		var ball = {
			title : {
				text : '销售额统计（饼状图）',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
			},
			series : [ {
				name : '销售额',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [ {
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				} ],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		bar.setOption(barOption);
		ballDiv.setOption(ball);
		loadOption(null, "", null, "");
		function typeChange() {
			//         	var type = $("#type>option:selected").val();
			var typeStr = "";
			var type;
			var deptId;
			var branchId;
			var teamId;
			if ($("#company>option:selected").val() == "") {
				typeStr = "分公司"
			}
			if ($("#company>option:selected").val() != "") {
				deptId = $("#company>option:selected").val();
				type = "dept";
				typeStr = "部门"
			}

			if ($("#branch>option:selected").val() != "") {
				branchId = $("#branch>option:selected").val();
				type = "branch"
				typeStr = "团队"
			}
			if ($("#team>option:selected").val() != "") {
				teamId = $("#team>option:selected").val();
				type = "team"
				typeStr = "个人"
			}
			var date = $("#date>option:selected").val();
			loadOption(type, date, null, typeStr, deptId, branchId, teamId);
		}
		function loadOption(type, date, quarter, typeStr, deptId, branchId,
				teamId) {
			var canNotReadAllMessage = $("#canNotReadAllMessage").val();
			$.ajax({
				url : 'saleChart.do',
				data : {
					method : type,
					date : date,
					quarter : quarter,
					deptId : deptId,
					branchId : branchId,
					teamId : teamId,
					canNotReadAllMessage : canNotReadAllMessage
				},
				type : 'post',
				dataType : 'json',
				async : false,
				success : function(data) {
					if (data != null) {
						// 填入数据
						ballDiv.setOption({
							title : {
								text : typeStr + '销售业绩统计（饼状图）',
								x : 'center'
							},
							legend : {
								data : data.dept
							},
							series : [ {
								// 根据名字对应到相应的系列
								data : data.data
							} ]
						});
						bar.setOption({
							title : {
								text : typeStr + '销售业绩统计（条形图）',
								x : 'center'
							},
							xAxis : {
								data : data.dept
							},
							series : [ {
								// 根据名字对应到相应的系列
								data : data.countSale
							} ]
						});
						return;
					}
					//弹框插件
				},
				error : function() {
					alert("不好意思请求失败了");
				}
			});
		}

		function cpmpanyDept() {
			$.ajax({
				url : "getDeptInfo.do",
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 0) {
						var branchHtml = "";
						if(result.quarters==5 || result.quarters==6){
								branchHtml += "<option value=\"\" >-全部分公司-</option>";
							}
						for (var i = 0; i < result.data.length; i++) {
							branchHtml += "<option value=\""
									+ result.data[i].deptId + "\">"
									+ result.data[i].deptName + "(" +result.data[i].remake+")</option>";
						}
						$("#company").append(branchHtml);
						$("#company").trigger("change");

					} else {
						sweetAlert("提示", "操作失败,请刷新后重试!", "error");
					}
				},
				error : function() {
					sweetAlert("异常", "网络出现异常!", "error");
				}
			});// ajax end;
	}
	function cpmpanyChage(id) {
			if ($("#company").val() != "" && $("#company").val() != null) {
				$.ajax({
					url : "getBranchInfo.do",
					type : "post",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							var branchHtml = "";
							if(result.quarters!=2 && result.quarters!=1){
								branchHtml += "<option value=\"\" >-请选择-</option>";
							}
							for (var i = 0; i < result.branch.length; i++) {
								branchHtml += "<option value=\""
										+ result.branch[i].branchId + "\">"
										+ result.branch[i].branchName +"</option>";
							}
							$("#branch").empty();
							$("#branch").append(branchHtml);
							$("#branch").trigger("change");

						} else {
							sweetAlert("提示", "未知异常!", "error");
						}
					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
			}else{
				$("#branch").empty();
				$("#branch").append("<option value=\"\" >-请选择-</option>");
				$("#branch").trigger("change");
			}
			
		}
		function branchChage(id) {  	
			if ($("#branch").val() != "" && $("#branch").val() != null) {
				$.ajax({
					url : "getTeamInfo.do",
					type : "post",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							var branchHtml = "";
							if(result.quarters!=1){
								branchHtml += "<option value=\"\" >-请选择-</option>";
							}
							for (var i = 0; i < result.data.length; i++) {
								branchHtml += "<option value=\""
										+ result.data[i].branchId + "\">"
										+ result.data[i].branchName + "</option>";
							}
							$("#team").empty();
							$("#team").append(branchHtml);
							typeChange();
						} else {
							sweetAlert("提示", "未知异常!", "error");
						}
					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
			}else{
   				$("#team").empty();
   				$("#team").append("<option value=\"\" >-请选择-</option>");
   				typeChange();
   			}
			
		}

		function exportXLS(status) {
			var type;
			var deptId;
			var branchId;
			var teamId;

			if ($("#company>option:selected").val() != "") {
				deptId = $("#company>option:selected").val();
				type = "dept";
			}

			if ($("#branch>option:selected").val() != "") {
				branchId = $("#branch>option:selected").val();
				type = "branch"
			}
			if ($("#team>option:selected").val() != "") {
				teamId = $("#team>option:selected").val();
				type = "team"
			}

			var date = $("#date>option:selected").val();
			var canNotReadAllMessage = $("#canNotReadAllMessage").val();

			$("#export-date").val(date);
			$("#export-type").val(type);
			$("#export-deptId").val(deptId);
			$("#export-branchId").val(branchId);
			$("#export-teamId").val(teamId);
			$("#export-canNotReadAllMessage").val(canNotReadAllMessage);
			$("#export-status").val(status);

			$('#exportForm').attr('action', 'teamCharExport');
			$('#exportForm').attr('target', '_blank');
			$('#exportForm').submit();
		}
	</script>
</body>

</html>